<template>
	<sy-navigation :homejb="'entryScore'" :showTurn='true' :scrollTopNum="scrollTopNum" @showTurnHandle="showTurnHandle">
		<template #header>
			<view class="header_title_c">
				 录取分数
			</view>
		</template>
		<view class="entry_score_view">
			<view class="search_boxs_before" :style="bgEnBoxStyle">
				<view class="search_boxs_sy no_fixed">
					<view class="search_box">
						<uni-search-bar  radius="50" placeholder="输入学校名称查询" clearButton="auto" cancelButton="none" v-model="searchValue" class="search_input"/>
						<view class="c_btn" @click="searchQuery">
							搜索
						</view>
					</view>
					<view class="shaixuan2">
						<view class="pt1">
							学校列表（185所）
						</view>
						<view class="pt2" @click="searchHandle('type')">
							<!-- <span class="c_text">学校类型</span><span class="c_sanj" :class="showType == 1?'active':''"></span> -->
							<span  class="c_text">{{schoolTypeSel == -1 ? '学校类型':(schoolType[schoolTypeSel] && schoolType[schoolTypeSel].name)}}</span> <span class="c_sanj" :class="showType == 1?'active':''"></span>
						</view>
						<view class="pt2" @click="searchHandle('xuequ')">
							<!-- <span  class="c_text">所属学区</span> <span class="c_sanj" :class="showType == 2?'active':''"></span> -->
							<span  class="c_text">{{schoolListSel == -1 ? '所属学区':(schoolList[schoolListSel] && schoolList[schoolListSel].name)}}</span> <span class="c_sanj" :class="showType == 2?'active':''"></span>
						</view>
					</view>
					<view class="c_xuanxiang" v-if="isShowSc2">
						<template v-if="showType == 1">
					
							<view class="c_xuanxiang_neirong">
								<view class="c_item_xx" @click="changeSearch(-1,'type')">
									全部
								</view>
								<view class="c_item_xx" v-for="(item,key) in schoolType" @click="changeSearch(key,'type')">
									{{item.name}}
								</view>
							</view>
						</template>
						<template v-if="showType == 2">
							<view class="c_xuanxiang_neirong">
								<view class="c_item_xx" @click="changeSearch(-1,'area')">
									全部
								</view>
								<view class="c_item_xx" v-for="(item,key) in schoolList" @click="changeSearch(key,'area')">
									{{item.name}}
								</view>
							</view>
							
						</template>
					</view>
				</view>
			</view>
			<view class="sc_list" :style="scListStyle">
				<view class="sc_item_view">
					<sy-school1 :cItem="cItem" v-for="cItem in dataList" @showDetail="showDetail"></sy-school1>
				</view>
				<view class="pging_sy sm_top" v-if="dataList.length == 0">
					<image src="../../static/nopage.png" class="doing_img"></image>
					<view class="do_text">
						搜索无结果！
					</view>
				</view>
			</view>
		</view>
	</sy-navigation>
</template>

<script>
	export default {
		data() {
			return {
				scrollTopNum:0,
				searchValue:"",
				schoolList:[],
				schoolListSel:-1,
				schoolType:[],
				schoolTypeSel:-1,
				isShowSc2:false,
				showType:0,
				dataList:[],
				page:1
			};
		},
		onPageScroll(e) {
		    // e.scrollTop 表示当前页面滚动的距离
		    console.log('页面滚动距离：', e.scrollTop);
			this.scrollTopNum = e.scrollTop;
			
		},
		computed:{
			bgEnBoxStyle(){
				console.log(this.$store.state.jiaonang,uni.upx2px(560))
				let calcNt = uni.upx2px(560) - this.$store.state.jiaonang.bottom;
				if(this.scrollTopNum > calcNt){
					return {
						'position': 'fixed',
						'top': this.$store.state.jiaonang.bottom + "px",
						'z-index':2
					}
				}else{
					return {
						'position': 'relative',
						'bottom': this.$store.state.jiaonang.bottom + "px",
						'z-index':2
					}
				}
			},
			scListStyle(){
				let calcNt = uni.upx2px(560) - this.$store.state.jiaonang.bottom;
				if(this.scrollTopNum > calcNt){
					return {
						'padding-top':'80rpx'
					}
				}else{
					return {
						'position': 'relative',
						'bottom': this.$store.state.jiaonang.bottom + "px",
					}
				}

			}
		},
		onLoad() {
			this.getSchoolTyle();
			this.getData();
		},
		methods:{
			changeSearch(key,type){
				console.log(key,type,"key,type")
				if(type === 'area'){
					this.schoolListSel = key
				}
				if(type === 'type'){
					this.schoolTypeSel = key
				}
				this.showType = 0;
				this.isShowSc2 = false;
				this.searchQuery();
			},
			getSchoolTyle(){
				this.$queryApi("post","/school.school/type", {}, res => {
					console.log(res,"学区类型")
					this.schoolList = res.data.area;
					this.schoolType = res.data.type;
				},"","noMsg")
			},
			getData(){
				uni.showLoading()
				console.log(this.schoolTypeSel,"this.schoolTypeSel")
				let type = this.schoolTypeSel > -1 ?this.schoolType[this.schoolTypeSel].id:"";
				let area = this.schoolListSel > -1 ?this.schoolList[this.schoolListSel].id:"";
				
				this.$queryApi("post","/school.school/index", {
					pagesize:10,
					page:this.page,
					type,
					area,
					keyword:this.searchValue
				}, res => {
					console.log(res,"学校")
				
					let kongList = res.data.data;
					if(this.page == 1){
						this.dataList =  kongList;
					}else{
						this.dataList =  [...this.dataList,...kongList];
					}
					setTimeout(()=>{
						uni.hideLoading()
					},500)
				},"","noMsg")
			},
			showDetail(item){
				uni.navigateTo({
					url:"/pages/index/entryScoreDetail?item="+JSON.stringify(item)
				})
			},
			showTurnHandle(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			searchQuery() {
				this.page = 1;
				this.getData();
			},
			searchHandle(type){
				if(type == 'type'){
					if(this.showType != 1){
						this.showType = 1;
						this.isShowSc2 = true;
					}else{
						this.showType = 0;
						this.isShowSc2 = false;
					}
				}
				if(type == 'xuequ'){
					if(this.showType != 2){
						this.showType = 2;
						this.isShowSc2 = true;
					}else{
						this.showType = 0;
						this.isShowSc2 = false;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
.header_title_c{
	color: #333333;
	font-size: 36rpx;
	font-weight: 400;
	left: 50%;
	position: absolute;
	top:50%;
	transform: translate(-50%,-50%);
	.turn_img{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
		top: 0%;
	}
}
.entry_score_view{
	background-color: #fff;
	color: #3D3D3D;
	min-height: 100vh;
	box-sizing: border-box;
	.sc_list{
		position: relative;
		
	}
	.sc_item_view{
		flex-direction: column;
		padding: 0rpx 30rpx 60rpx;
		
	}
	.search_boxs_sy.no_fixed{
		position: relative;
	}
}
</style>
